<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item :label="queryTime.label">
        <el-date-picker :type="queryTime.type" v-model="queryParams.date" :value-format="queryTime.format"
          @change="changeDate" />
      </el-form-item>
      <el-form-item label="教室">
        <el-switch v-model="queryParams.groupDept" active-text="分组" inactive-text="不分组" @change="changeGroup">
        </el-switch>
      </el-form-item>
      <el-form-item label="类型">
        <el-switch v-model="queryParams.groupType" active-text="分组" inactive-text="不分组" @change="changeGroup">
        </el-switch>
      </el-form-item>
      <el-form-item label="分组时间">
        <el-radio-group v-model="queryParams.groupDate" @change="changeGroup">
          <el-radio-button :label="1">年</el-radio-button>
          <el-radio-button :label="2">月</el-radio-button>
          <el-radio-button :label="3">日</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="指标">
        <el-radio-group v-model="valueKeys[0]" @change="updateChart">
          <el-radio-button v-for="(v,k,i) in valueFormat" :label="k" :key="'value_key_'+i">{{ v.name }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div ref="chart" style="width: 90vw;height: 45vh;"></div>
  </div>
</template>
<script>
  import {
    DoubleGroupChart
  } from '@/views/components/chart'
  import {
    FreeCalendarChart,
    valueFormat
  } from '../components/CalendarChart'
  export default {
    name: 'AnalysisCalendarChart',
    mixins: [DoubleGroupChart, FreeCalendarChart],
    data() {
      return {
        valueFormat,
        chartOption: {
          title: {
            text: '统计分析',
            left: 'center'
          },
          tooltip: {
            show: true,
          },
          xAxis: [{
            type: 'category'
          }],
          yAxis: [{
            type: 'value',
            show: true
          }]
        },
        queryTime: {
          label: '日期',
          type: 'date',
          valueFormat: 'yyyy-MM-dd'
        },
        queryParams: {
          groupDept: true,
          groupType: true,
          groupDate: null
        },
        groupKeys: ['department', 'type'],
        valueKeys: ['onlineCount']
      }
    },
    created() {
      this.queryData()
    },
    mounted() {
      setTimeout(this.createChart, 300)
    },
    methods: {}
  }

</script>
